<template>
	<div :class="curClassName" :style="curStyle">
		<video
			:src="playerParams.path"
			:autoplay="playerParams.autoplay"
			:controls="playerParams.showcontrols"
			:loop="playerParams.replay"
			:muted="playerParams.mute"
		>
			<source :src="playerParams.path" type="video/mp4" />
			<source :src="playerParams.path" type="video/ogg" />
			<source :src="playerParams.path" type="video/webm" />
		</video>
	</div>
</template>
<script setup lang="ts">
import { createUUID } from '@/core';

import { RawItemVideoProps } from './rawitem-video';
const props = defineProps(RawItemVideoProps);

/**
 * 项名称
 *
 * @memberof RawItemVideo
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 当前容器样式
 *
 * @memberof RawItemVideo
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});

/**
 * 类名
 *
 * @memberof RawItemVideo
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return `app-rawitem-video ${itemName.value} ${layoutModel.sysCss || ''}`;
	}
});

/**
 * 播放器唯一标识
 * @memberof AppRawItemVideo
 */
const uuid = createUUID();

/**
 * 视频播放参数
 *
 * @type {any}
 * @memberof AppRawItemVideo
 */
const playerParams = reactive({
	id: uuid,
	height: '100%',
	width: '100%',
	path: '',
	mute: true,
	autoplay: true,
	replay: false,
	showcontrols: true,
});

/**
 * 处理静态视频播放
 *
 * @memberof AppRawItemVideo
 */
const handleStaticVideo = () => {
	if (props.videoParams && props.videoParams.length > 0) {
		const rawParams: any = {};
		props.videoParams.forEach((param: any) => {
			if (
				param.key == 'autoplay' ||
				param.key == 'replay' ||
				param.key == 'showcontrols'
			) {
				rawParams[param.key] = param.value == '1' ? true : false;
			} else {
				rawParams[param.key] = param.value;
			}
		});
		Object.assign(playerParams, rawParams);
	}
};

handleStaticVideo();
</script>
